import 'package:flutter/material.dart';

/**
 * @author hanson
 * @version[创立日期，2023/9/8 16:36]
 * @function[功用简介 ]
 **/
//https://blog.csdn.net/a18339063397/article/details/125163291
// body：当前界面所显示的主要内容 Widget

class foreachViewPage extends StatefulWidget {
  const foreachViewPage({Key? key}) : super(key: key);

  @override
  _foreachViewPageState createState() => _foreachViewPageState();
}

class _foreachViewPageState extends State<foreachViewPage> {

  @override
  Widget build(BuildContext context) {
    //屏幕大小
    Size mSize = MediaQuery
        .of(context)
        .size;
    //设备像素
    double rwidth = mSize.width;
    double rheight = mSize.height;

    return Scaffold(
        appBar: AppBar(
          title: Text("UI 循环 foreachView"),
        ),
        body: Center(
          child: Row(
            //children: getContent2(list, rwidth),
            children: <Widget>[
              // getContent(list,rwidth),
               getListViewData(),
              //_getContainer('phone', Icons.phone),

            ],
          ),

        ) // This trailing comma makes auto-formatting nicer for build methods.
    );
  }


//for循环返回的是Widget
  Widget getContent(List list, double rwidth) {
    List<Widget> listView = [];
    for (var i = 0; i < list.length; i ++) {
      listView.add(Container(
        color: Colors.white,
        child: Column(
          children: [
            Container(
              width: rwidth,
              height: 50,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  SizedBox(
                    width: 10,
                    height: 10,
                  ),
                  Container(
                    width: 5,
                    height: 20,
                    color: Color.fromRGBO(204, 0, 0, 1),
                  ),
                  SizedBox(
                    width: 10,
                    height: 10,
                  ),
                  Text(
                    list[i]['name'],
                    style: TextStyle(
                      color: Color.fromRGBO(58, 58, 58, 1),
                      fontSize: 17,
                    ),
                  ),
                ],),),
            Container(
              width: rwidth,
              child: Wrap(
                //for循环
                children: items(list[i]['allName'], rwidth),
              ),
            ),
            Container(
              width: rwidth,
              height: 10,
              color: Color.fromRGBO(245, 245, 245, 1),
            ),
          ],),),
      );
    }
    //重点在这里，因为用编辑器写Row生成的children后面会跟一个<Widget>[]，
    //此时如果我们直接把生成的tiles放在<Widget>[]中是会报一个类型不匹配的错误，把<Widget>[]删了就可以了
    Widget content = Column(
      children: listView,
    );
    return content;
  }

  //for循环返回的是Widget
  List<Widget> getContent2(List list, double rwidth) {
    List<Widget> listView = [];
    for (var i = 0; i < list.length; i ++) {
      listView.add(Container(
        color: Colors.white,
        child: Column(
          children: [
            Container(
              width: rwidth,
              height: 50,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  SizedBox(
                    width: 10,
                    height: 10,
                  ),
                  Container(
                    width: 5,
                    height: 20,
                    color: Color.fromRGBO(204, 0, 0, 1),
                  ),
                  SizedBox(
                    width: 10,
                    height: 10,
                  ),
                  Text(
                    list[i]['name'],
                    style: TextStyle(
                      color: Color.fromRGBO(58, 58, 58, 1),
                      fontSize: 17,
                    ),
                  ),
                ],),),
            Container(
              width: rwidth,
              child: Wrap(
                //for循环
                children: items(list[i]['allName'], rwidth),
              ),
            ),
            Container(
              width: rwidth,
              height: 10,
              color: Color.fromRGBO(245, 245, 245, 1),
            ),
          ],),),
      );
    }

    return listView;
  }

  //for循环返回的是List
  List<Widget> items(List list, double rwidth) {
    List<Widget> listView = [];
    for (var i = 0; i < list.length; i ++) {
      listView.add(Container(
        width: rwidth / 4,
        child: Column(
          children: [
            Image(
              image: AssetImage(list[i]['imageName']),
              width: 30,
              height: 30,
            ),
            SizedBox(
              width: 10,
              height: 10,
            ),
            Text(
              list[i]['imageTitle'],
              style: TextStyle(
                color: Color.fromRGBO(155, 155, 155, 1),
                fontSize: 14,
              ),

            ),
            SizedBox(
              width: 10,
              height: 20,
            ),
          ],),));
    }
    return listView;
  }

  //List getJsonData(){ //模拟后端json数据 只需string转json即可以。
  List list = [
    {
      "name": '我的账户',
      "allName":
      [
        {"imageName": '2.png', "imageTitle": '我的订单'},
        {"imageName": '58.png', "imageTitle": '会员'},
        {"imageName": 'assets/58.png', "imageTitle": '优惠券'},
      ],
    },

    {
      "name": '我的内容',
      "allName": [
        {"imageName": '2.png', "imageTitle": '订阅课程'},
        {"imageName": 'assets/58.png', "imageTitle": '历史记录'},
        {"imageName": 'assets/58.png', "imageTitle": '我的收藏'},
        {"imageName": 'assets/58.png', "imageTitle": '我的笔记'},
        {"imageName": 'assets/58.png', "imageTitle": '订阅课程'},
      ],
    },
  ];

/*
    return list;
  }*/

  //自定义方法
  Widget getListViewData() {
    var tempList = listData.map((value) {
      print("---${value["title"]}");
      return ListTile(
                  leading: Image.network("${value["imageUrl"]}"),
                  title: Text("${value["title"]}"),
          );
      });
    Widget content = Column(
      children: tempList.toList(),
    );
    return content;
  }


  /**
   * 抽取item项
   */
  Widget _getContainer(String test, IconData icon) {
    return Container(
      width: 460.0,
//      ListTile
      child: ListTile(
//       显示在title之前
        leading: Icon(icon),
//        显示在title之后
        trailing: Icon(icon),
        title: Text(test),
        subtitle: Text("我是subtitle"),
      ),
    );
  }



List listData = [
  {
    "title": 'Candy Shop',
    "author": 'Mohamed Chahin',
    "imageUrl": 'https://www.itying.com/images/flutter/1.png',
  },
  {
    "title": 'Childhood in a picture',
    "author": 'Google',
    "imageUrl": 'https://www.itying.com/images/flutter/2.png',
  },
  {
    "title": 'Alibaba Shop',
    "author": 'Alibaba',
    "imageUrl": 'https://www.itying.com/images/flutter/3.png',
  },
  {
    "title": 'Candy Shop',
    "author": 'Mohamed Chahin',
    "imageUrl": 'https://www.itying.com/images/flutter/4.png',
  },
  {
    "title": 'Tornado',
    "author": 'Mohamed Chahin',
    "imageUrl": 'https://www.itying.com/images/flutter/5.png',
  },
  {
    "title": 'Undo',
    "author": 'Mohamed Chahin',
    "imageUrl": 'https://www.itying.com/images/flutter/6.png',
  },
  {
    "title": 'white-dragon',
    "author": 'Mohamed Chahin',
    "imageUrl": 'https://www.itying.com/images/flutter/7.png',
  }

];

}


